/* 
* @Author: kong
* @Date:   2018-02-12 17:34:13
* @Last Modified by:   anchen
* @Last Modified time: 2018-03-13 14:31:25
*/
;(function(factory){
    if(typeof define === 'function' && define.amd){
        define(['jquery','lodash'],factory);
    }else if (typeof exports !== 'undefined') {
        // For Node.js or CommonJS.
        var _ = require('lodash');
        var $ = require('jquery');
        module.exports = factory($, _);   
    }else{
         factory(jQuery,_);
    }   
}(function($,_){
    //防冲突处理，如果原型链上有，将之移给old变量
    var old = $.fn.rightContentFrame;
    //构造函数
    var RightContentFrame=function RightContentFrame(element,options){
      var self=this;
        this.$element = $(element);
        this.options = $.extend({},$.fn.rightContentFrame.defaults,options);
        this.init();
        
        
    };

    // 定义原型
    RightContentFrame.prototype ={
        // 初始化
        init:function(){
            this.rightStyleTitleHtml(
                
            );

        },
        rightStyleTitleHtml:function(){
            this.$element.empty();
            var isAnimate=this.options.isAnimate
            var html='';
            html+='<div class="container_title" id="rightStyleTitle">'
                +'<ul>'
                    +'<li tabValue="moduleProperty" class="active">组件属性</li>'
                    +'<li  tabValue="moduleStyle" style="display:'+(isAnimate ? 'block' : 'none')+'">组件样式</li>'
                    +'<li tabValue="moduleAnimation">组件动画</li>'
                +'</ul>'
            +'</div>';
            this.$element.append(html);
            this.rightSideContentHtml();
        },
        rightSideContentHtml:function(){
            var html='<div class="container_content rightSideContent" id="rightSideContent">';
            html+=this.modulePropertyHtml();
            html+=this.moduleStyleHtml();
            html+=this.moduleAnimationHtml();

            // html+='<div class="container_content rightSideContent" id="rightSideContent">'
            
            // +'<div boxTab="moduleAnimation">组件动画</div>'
        html+='</div>';
        this.$element.append(html);
        },
        modulePropertyHtml:function(){
            var html='';
            html+='<div boxTab="moduleProperty" class="active">'
                  // +'<form>'
                  //   +'<label for="bgColor">窗口背景:'
                  //       +'<span class="bgColorBtn">'
                  //           +'<input type="text" id="bgColorBtn" value="" />'
                  //           +'<div class="colorSelect"><span class="current_color"></span></div>'
                  //       +'</span>'
                  //   +'</label>'
                  // +'</form>'
                  html+=this.modulePropertyInitDom(this.options.rightContentData) 
                html+='</div>';

            return html;
        },
        modulePropertyInitDom:function(json){
            var html='<div class="styleConfig">'
                        +'<form class="editorForm">'
                            +'<div class="container-fluid">'
                                +'<div class="row">';

            html +=this.generatemodulePropertyDom(json);               

            html+=              '</div>'
                            +'</div>'
                        +'</form>'
                    +'</div>';
                    return html;
        },
        generatemodulePropertyDom:function(json){
            var html='';
            var self=this;
            
            if(typeof json==="object" && !(json.constructor === Array)){
                for(var k in json){
                    if(typeof (json[k])==="object" && !(json[k].constructor === Array)){
                        // html+='<div class="box">';
                        html+=self.generatemodulePropertyDom(json[k]);
                        // console.log(this.generatemodulePropertyDom(json[k]))
                        // html+='</div>'
                        
                    }else{
                        var valueHtml='';
                        html+='<div class="form-group '+json.cls+'">'
                                    +'<label class="contron-label '+json.labelcls+'">'+json.label+'</label>'
                                    +'<div class="'+json.valuecls+'">'

                                        // +jsonType
                        html+=self.getTypeTemplate(json.type,json.value)
                        if("fields" in json){
                            html+=self.generatemodulePropertyDom(json["fields"]);
                        }
                        html+=            '</div>'
                                +'</div>';
                        

                        break;
                        
                    }
                }
            }else if(typeof json==="object" && (json.constructor === Array)){//数组的情况
                $.each(json,function(index,item){
                    html+='<option >'+item.label+'</option>'
                })
            }
            return html;
        },
        getTypeTemplate:function(templateType,value){
            var html='';
            switch(templateType){
                case "input":
                    html+='<input type="text" />';
                   
                    break;
                case "group":
                    html+='<div class="dropdown">'
                                +'<button id="button1" class="btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">'
                                    +'<span class="value">1</span>'
                                    +'<span class="caret"></span>'
                                +'</button>'
                                +'<ul class="dropdown-menu" aria-labelledby="dLabel">'
                                    +'<li class="active">1</li>'
                                    +'<li class="">2</li>'
                                    +'<li class="">3</li>'
                                    +'<li>4</li>'
                                +'</ul>'
                            +'</div>';
                    break; 
                case "pageselect":
                    html+='<div class="dropdown">'
                                +'<button id="button1" class="btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">'
                                    +'<span class="value">1</span>'
                                    +'<span class="caret"></span>'
                                +'</button>'
                                +'<ul class="dropdown-menu" aria-labelledby="dLabel">'
                                    +'<li class="active">1</li>'
                                    +'<li class="">2</li>'
                                    +'<li class="">3</li>'
                                    +'<li>4</li>'
                                +'</ul>'
                            +'</div>';
                    break; 
            };
            return html;
        },


        moduleStyleHtml:function(){
            var html='';
            html+='<div boxTab="moduleStyle">组件样式</div>';
            return html;
        },




        moduleAnimationHtml:function(){
            var html='';
            html+='<div boxTab="moduleAnimation">组件动画</div>';
            return html;
        }



        
        


    };


    // 为了避免多次实例化
    $.fn.rightContentFrame = function rightContentFrame(option,value) {
        var retval;
        var $set = this.each(function () {
            var $this = $(this);
            var data = $this.data('makerui.rightContentFrame');
            var options = typeof option === 'object' && option;

            $this.data('makerui.rightContentFrame', (data = new RightContentFrame(this, options)));
            if (typeof option === 'string') retval = data[option](value);
        });
        return (retval === undefined) ? $set : retval;
    };
    
    $.fn.rightContentFrame.defaults = {
      isAnimate:false,
       
    };
    $.fn.rightContentFrame.Constructor = RightContentFrame;
    $.fn.rightContentFrame.noConflict = function () {
        $.fn.rightContentFrame = old;
        return this;
    }; 













}));